<!--
 * @Des: 
 * @Author: jin_yc
 * @Date: 2019-11-08 10:21:45
 * @LastEditor: jin_yc
 * @LastEditTime: 2021-12-20 14:22:35
 -->
<template>
  <fks-dialog
    :visible="visible"
    append-to-body
    width="480px"
    @close="close"
    @open="open"
  >
    <div slot="title">
      <i
        v-if="dialogType == 'add'"
        class="fks-icon-plus"
      />
      <i
        v-if="dialogType != 'add'"
        class="fks-icon-edit"
      />
      <span
        v-if="dialogType == 'add'"
        style="margin-left: 4px"
      >
        {{ LANG.ADD }}
      </span>
      <span
        v-if="dialogType != 'add'"
        style="margin-left: 4px"
      >
        {{ LANG.EDIT }}
      </span>
    </div>
    <fks-form
      v-if="visible"
      ref="Form"
      :model="form"
      label-position="right"
      label-width="90px"
      :rules="rules"
    >
      <!-- <fks-form-item :label="LANG.DICTIONARY_NAME" prop="content" :span="24">
        <fks-input
          v-model="form.content"
          show-word-limit
          maxlength="50"
        ></fks-input>
      </fks-form-item> -->
      <fks-form-item
        :label="LANG.DICTIONARY_KEY"
        prop="code"
        :span="24"
      >
        <fks-input
          v-model="form.code"
          show-word-limit
          maxlength="50"
        />
      </fks-form-item>
      <fks-form-item
        v-for="item in arr"
        :key="item.key"
        :span="24"
        :label="item.label"
        :prop="item.key"
        :required="$lang == item.key ? true : false"
      >
        <fks-input
          v-model="form[item.key]"
          maxlength="255"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        v-if="showButton"
        :span="24"
        label
        prop
      >
        <fks-button
          v-if="!show"
          label
          style="width: 100%"
          icon="fks-icon-arrow-down"
          @click="showAll"
        >
          {{ LANG.ALL_LANGUAGES }}
        </fks-button>
        <fks-button
          v-if="show"
          label
          style="width: 100%"
          icon="fks-icon-arrow-up"
          @click="showNone"
        >
          {{ LANG.HIDE_LANGUAGES }}
        </fks-button>
      </fks-form-item>
      <!-- <fks-form-item :label="LANG.DICTIONARY_TYPE" prop="type" :span="12">
        <fks-select
          v-model="form.type"
          clearable
          style="width: 100%"
          :placeholder="LANG.PLEASE_SELECT"
          filterable
        >
          <fks-option
            v-for="item in selectList"
            :label="item.label"
            :value="item.value"
            :key="item.value"
          ></fks-option>
        </fks-select>
      </fks-form-item> -->
      <!-- <fks-form-item :label="LANG.REMARK" prop="description" :span="12">
        <fks-input
          v-model="form.description"
          show-word-limit
          maxlength="50"
        ></fks-input>
      </fks-form-item> -->
    </fks-form>
    <div slot="footer">
      <fks-button
        type="primary"
        :loading="addLoading"
        icon="fks-icon-check"
        @click="submit"
      >
        <span style="margin-left: 4px">{{ LANG.SAVE }}</span>
      </fks-button>
    </div>
  </fks-dialog>
</template>

<script>
import { addEditDic, getAllDicDetail } from '@/modules/SysConfig/Dictionary/api'
import { ENUM } from '@/store/State/stateTypes'
import { lang } from '@/modules/SysConfig/Lang/langClass.js'
export default {
  name: 'DicDialog',
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    dialogType: {
      type: String,
      default: 'add'
    },
    data: {
      type: Object,
      default: () => {
        return {
          content: '',
          code: '',
          type: '',
          description: '',
          langName: ''
        }
      }
    }
  },
  data() {
    return {
      dialog: false,
      // langValue: '',
      addLoading: false,
      // selectList: [],
      form: {},
      arr: [
        // { label: '简体中文', key: 'zh-CN' },
        // { label: 'English', key: 'en' }
      ],
      showButton: false,
      show: false
    }
  },
  computed: {
    rules() {
      return {
        content: [
          {
            required: true,
            message: this.LANG.DIC_NAME_NOT_EMPTY,
            trigger: ['blur']
          }
        ],
        code: [
          {
            required: true,
            message: this.LANG.DIC_KEY_NOT_EMPTY,
            trigger: ['blur']
          }
        ]
        // type: [
        //   {
        //     required: false,
        //     message: this.LANG.DIC_TYPE_REQUIRED,
        //     trigger: ['change']
        //   }
        // ]
      }
    },
    languages() {
      return this.$store.state[ENUM].languages || []
    }
  },
  watch: {
    data(val) {
      this.form = Object.assign({}, val)
      //this.langValue = val.langCode
    }
  },
  mounted() {},
  methods: {
    //不显示除当前系统语种外其他语种
    showNone() {
      lang.forEach((item) => {
        if (item.code == this.$lang) {
          this.arr = [
            {
              label: item.name,
              key: this.$lang
            }
          ]
        }
      })
      // this.arr = [
      //   // { label: '简体中文', key: 'zh-CN' },
      //   // { label: 'English', key: 'en' }
      // ]
      this.show = false
    },
    //显示系统配置的所有语种
    showAll() {
      this.show = true
      this.languages.forEach((item) => {
        if (item.code != this.$lang) {
          // if (item.code != 'en' && item.code != 'zh-CN') {
          this.arr.push({ label: item.name, key: item.code })
        }
      })
    },
    //弹窗打开回调
    open() {
      //不管是否配了多语言，先把当前语种的加进arr里
      lang.forEach((item) => {
        if (item.code == this.$lang) {
          this.arr = [
            {
              label: item.name,
              key: this.$lang
            }
          ]
        }
      })
      if (this.languages.length > 0) {
        this.languages.forEach((item) => {
          if (item.code != this.$lang) {
            // if (item.code != 'en' && item.code != 'zh-CN') {
            this.show = false
            this.showButton = true
          }
        })
      }
      //console.log(this.$lang)
      // this.selectList = []
      // this.$refs.Form.clearValidate()
      // getLangDicDetail({
      //   code: 'modules',
      //   langCode: this.$lang
      // }).then((res) => {
      //   if (res.data.modules) {
      //     res.data.modules.forEach((item) => {
      //       if (item.code != 'ALL') {
      //         this.selectList.push({
      //           label: item[this.$lang],
      //           value: item.code
      //         })
      //       }
      //     })
      //   }
      // })
    },
    ifLang(key) {
      let w = false
      lang.forEach((item) => {
        if (item.code == key) {
          w = true
        }
      })
      return w
    },
    handlerData() {
      this.copyForm = JSON.parse(JSON.stringify(this.form))
      let copyFormId = this.data.id ? this.data.id : '' //暂存id，后面编辑时用到
      let tmp = {
        code: this.copyForm.code,
        parentId: this.dialogType == 'add' ? '' : '0',
        pathId: this.dialogType == 'add' ? '' : this.copyForm.pathId
      }
      let params = []
      //删除copyForm的id属性，避免ifLang方法中key和code重复（id会重复）
      delete this.copyForm.id
      for (var key in this.copyForm) {
        if (this.ifLang(key)) {
          params.push({ content: this.copyForm[key], langCode: key })
        }
      }
      if (params.length > 0) {
        params.forEach((item) => {
          Object.assign(item, tmp, { serviceType: 1, id: copyFormId })
        })
      }
      return params
    },
    submit() {
      //console.log(this.handlerData())
      this.addLoading = true
      this.$refs.Form.validate((valid) => {
        if (valid) {
          //业务字典新增||编辑
          let data = this.handlerData()
          //接口传入两个参数，一是数据，二是类型（新增 or 编辑）
          addEditDic(data, this.dialogType)
            .then((res) => {
              if (res.status) {
                this.addLoading = false
                this.close()
                this.$parent.initData()
                // this.$parent.getDefaultData()
                this.$message.success(
                  this.dialogType == 'add'
                    ? this.LANG.ADD_SUCCESS
                    : this.LANG.EDIT_SUCCESS
                )
              }
            })
            .catch((error) => {
              this.addLoading = false
            })
        } else {
          this.addLoading = false
        }
      })
    },
    close() {
      this.$refs.Form.clearValidate()
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .fks-dialog__body {
  padding-bottom: 0;
}
</style>